<script setup></script>

<template>
  <div class="zcard">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<style scoped lang="less">
.zcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 3px 3px 8px #ccc;
  header {
    display: block;
    position: relative;
    padding: 0;
    z-index: 0;
    height: auto;
  }
  footer {
    margin: 0;
  }
}
</style>
